<template>
    <ayjDialog ref="ayjDialogRef" :width="'30%'" :fullscreen="false" :title="title" :slotFooter="false">
        <div class="dialog-content">
            <div class="dialog-content-header">
                <Select v-model="queryBillLs.in_out" :options="optionsBillType" :placeholder="'选择流水类型'" :size="'small'"
                    width="200px" />
            </div>
            <div class="dialog-content-body" v-infinite-scroll="loadMore">
                <template v-if="listData && listData.length > 0">
                    <div :class="['list-cell', 'flex_between']" v-for="(item, index) in listData" :key="index">
                        <div>
                            <h3 class="font_black2">{{ item.atime_txt || '--' }}</h3>
                            <h5>型号：{{ item.type_name || '--' }}</h5>
                            <h5>摘要：{{ item.txt || '--' }}</h5>
                        </div>
                        <div>
                            <span :class="['font_size18', 'mr5', item.in_out == 1 ? 'font_green' : 'font_red']"> {{ item.times || 0 }} </span> 次
                        </div>
                    </div>
                </template>
                <empty v-else-if="listData && listData.length == 0" />
                <div class="flex_center" v-if="!hasMore && listData && listData.length > 0">
                    <div class="mt10 mb20"> 暂无更多数据~ </div>
                </div>
            </div>
            <div class="dialog-content-footer"></div>
        </div>
    </ayjDialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps, defineExpose, nextTick } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import { Empty } from 'element-ui'
const pnumSize = 20
import Select from '@/components/commV2/Select/index.vue'

// 获取当前组件实例
const { proxy } = getCurrentInstance()
const props = defineProps({
    title: {
        type: String,
        default: '本店流水'
    },
    customerRow: {
        type: Object,
        default: () => { }
    },
    who: {
        type: String,
        default: ''
    },
})

const optionsBillType = ref([
    {
        value: '',
        label: '全部类型'
    },
    {
        value: '1',
        label: '充值'
    },
    {
        value: '2',
        label: '消耗'
    }
])

// 次数
const queryBillLs = ref({
    in_out: '', // 1=充值 2=消耗   不传 or 其他 默认1
    pfrom: 0,
    pnum: pnumSize,
})

watch(() => queryBillLs.value.in_out, (newVal) => {
    if (newVal) {
        queryBillLs.value.pfrom = 0
        listData.value = []
        getDevtimesBillLs()
    } else {
        queryBillLs.value.in_out = ''
        queryBillLs.value.pfrom = 0
        listData.value = []
        getDevtimesBillLs()
    }
})

const loading = ref(false)
const hasMore = ref(false)
const listData = ref([])
// 查询次数
const getDevtimesBillLs = async () => {
    try {
        let param = {
            ...queryBillLs.value,
            who: props.who,
            uid: props.who == 'u' ? props.customerRow.uid : ''
        }
        loading.value = true
        let res = await proxy.$api({ url: config.devtimes_bill_ls, data: param });
        if (res.status == 1) {
            let list = res?.data?.ls || []
            if (list && list.length > 0) {
                listData.value = listData.value.concat(list || [])
                hasMore.value = list.length >= pnumSize
            } else {
                hasMore.value = false
            }
        }
        loading.value = false
    } catch (error) {
        hasMore.value = false
        loading.value = false
    }
}

const loadMore = () => {
    if (!hasMore.value && !hasMore.value) return
    queryBillLs.value.pfrom += pnumSize
    getDevtimesBillLs()
}

const ayjDialogRef = ref(null)
const open = () => {
    hasMore.value = false
    queryBillLs.value.pfrom = 0
    listData.value = []
    ayjDialogRef.value.open()
    nextTick(() => {
        getDevtimesBillLs()
    })
}

const close = () => {
    ayjDialogRef.value.close()
}

onMounted(() => { })
onBeforeUnmount(() => { })
onUnmounted(() => { })

defineExpose({
    open,
    close
})

</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    flex-direction: column;
    height: 550px;

    &-header {
        margin-bottom: 10px;
    }

    &-body {
        flex: 1 1 auto;
        overflow: auto;
    }

    &-footer {
        margin: 14px 0 0 0;
    }
}

.list-cell {
    border-radius: 8px;
    padding: 10px;
    background-color: #f5f7fa;
    margin-bottom: 10px;
    border: 1px solid #f5f7fa;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out;

    .selete_img {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
    }
}

.list-cell:hover {
    background-color: rgba(108, 159, 241, 0.2);
}

.active {
    background-color: rgba(108, 159, 241, 0.2);
}

::v-deep .el-divider {
    margin: 10px 0 !important;
}

.info-box {
    padding: 10px 14px;
    background-color: #f4f4f5;
    color: #909399;
    border-radius: 6px;
}

.info-waring-box {
    padding: 10px 14px;
    background-color: #fdf6ec;
    color: #eaae55;
    border-radius: 6px;
}
</style>